<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>cxColor 颜色选择器</title>
<link rel="stylesheet" href="css/jquery.cxcolor.css">
<style>
body{padding:20px;background:#ddd;font:14px/1.7 Arial,"\5b8b\4f53";}
h1,h2,h3{font:bold 36px/1 "\5fae\8f6f\96c5\9ed1";}
h2{font-size:20px;}
h3{font-size:16px;}
fieldset{margin:1em 0;}
fieldset legend{font:bold 14px/2 "\5fae\8f6f\96c5\9ed1";}
a{color:#06f;text-decoration:none;}
a:hover{color:#00f;}

.wrap{width:600px;margin:0 auto;padding:20px 40px;border:2px solid #999;border-radius:8px;background:#fff;box-shadow:0 0 10px rgba(0,0,0,0.5);}
</style>
</head>
<body>
<div class="wrap">
	<h1>jQuery cxColor 颜色选择器</h1>

	<h2>示例</h2>
	<form action="getcolor.php" method="post">
		<fieldset>
			<legend>默认</legend>
			<label for="color_a">选择颜色：</label><input id="color_a" name="mycolor" type="text" class="input_cxcolor" readonly>　<button type="submit">提 交</button>
		</fieldset>
	</form>

	<fieldset>
		<legend>在参数中设置默认值</legend>
		<label for="color_b">选择颜色：</label><input id="color_b" type="text" class="input_cxcolor" readonly>
	</fieldset>

	<fieldset>
		<legend>在 value 中有默认值</legend>
		<label for="color_c">选择颜色：</label><input id="color_c" type="text" class="input_cxcolor" readonly value="#ff0000">
	</fieldset>

	<fieldset>
		<legend>API 示例</legend>
		<p>标题：<input id="title" type="text" value="文章标题"></p>
		<p><label for="color_d">颜色：</label><input id="color_d" type="text" class="input_cxcolor" readonly value="#009900"></p>
		<p id="acts">
			<button type="button" value="show">显示面板</button>
			<button type="button" value="color" data-color="#ff0000">设置为红色</button>
			<button type="button" value="color" data-color="#0000ff">设置为蓝色</button>
			<button type="button" value="reset">默认颜色</button>
			<button type="button" value="clear">清除颜色</button>
		</p>
	</fieldset>
</div>

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/jquery.cxcolor.min.js"></script>
<script>
$("#color_a").cxColor();

$("#color_b").cxColor({
	color:"#0066ff"
});

$("#color_c").cxColor();
	
(function(){
	var color=$("#color_d");
	var title=$("#title");
	var acts=$("#acts");
	var mycolor;

	color.bind("change",function(){
		title.css("color",this.value)
	});

	mycolor=$("#color_d").cxColor();
	
	acts.delegate("button","click",function(){
		var _val=this.value;
		var _this=$(this);
		
		switch (_val){
			case "show":
				mycolor.show();
				break;
			case "hide":
				mycolor.hide();
				break;
			case "color":
				mycolor.color(_this.data("color"));
				break;
			case "reset":
				mycolor.reset();
				break;
			case "clear":
				mycolor.clear();
				break;
		};
		
	});

	$("#btn_red").bind("click",function(){
		mycolor.color("#ff0000");
	});

	$("#btn_show").bind("click",function(){
		mycolor.show();
	});
})();
</script>
</body>
</html>
